<template>
  <section id="isLogin" class="isLogin">
    <!-- 未登录 -->
    <ul class="login-no" v-if="getUserInfo">
      <li class="login" @click="goEnter"><a>登录</a></li>
    </ul>
    <!-- 已登录 -->
    <ul class="login-yes" v-if="!getUserInfo">
      <li @click="goEnter">已登录</li>
    </ul>
  </section>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  export default {
    name: 'isLogin',
    computed: {
      ...mapGetters(['getUserInfo'])
    },
    methods: {
      ...mapMutations(['SET_USER_INFO']),
      goEnter () {
        this.SET_USER_INFO()
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .login-no,.login-yes{
    height: 1rem;
    width: 100%;
    line-height: 1rem;
    text-align: center;
  }
</style>
